<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 class="title">
        <span>xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
    </h2>
    <style>
        .title{
            width: 550px;
            color: #333;
            line-height: 2;
        }
        .title span{
            /* linear-gradient 设置渐变背景,no-repeat 背景不重复，left bottom 设置背景位置 */
            background: linear-gradient(to right,#ff5f57,#28c840)
             no-repeat right bottom;
            /* 设置背景的大小，开始为0px即隐藏背景 */
            background-size: 0px 2px;
            /* 只对 background-size 进行过渡  */
            transition: background-size 1s;
        }
        .title span:hover{
            background-position: left bottom;
            background-size: 100% 2px;
        }
    </style>
</body>
</html>